<template>
  <section class='flex new-post'>
    <div class='flex flex-ul'>
      <h5 class="part-title">{{ title }}</h5>
      <ul class='flex-ul flow-ul no-scrollbar'>
        <template v-for="article in featureList" :key="article.id">
          <li class='entry-preview'>
            <time class="post-time" :datetime="article.createTime">{{ timeAgo(new Date(article.createTime)) }}</time>
            <a class="entry-post" :href='ArticlePath.Path+article.id'>
              <img :src="article.articleCover" class="loaded" alt="" loading="lazy">
            </a>
            <div class="entry-box">
              <div class="entry-header">
                <h6 class="entry-title">
                  <a :href='ArticlePath.Path+article.id' rel="bookmark">{{ article.articleTitle }}</a>
                </h6>
              </div>
              <footer class="entry-meta">
                <div class="post-categories">
                  <span class="tag vcard">
                    <a href="javascript:void(0);" rel="category tag">{{ article.categoryName }}</a>
                  </span>
                  <span class="tag-list">
                    <template v-for="tag in article.tags" :key="tag.id">
                      <a href="javascript:void(0);" rel="tag">{{ tag.tagName }}</a>
                    </template>
                  </span>
                </div>
              </footer>
            </div>
          </li>
        </template>
      </ul>
      <nav class="part-btn fade-before fade-after">
        <div class="new-post-btn">
          <button class="prev" @click="addScrollEventPrev('.new-post', 'li')"></button>
          <button class="next" @click="addScrollEventNext('.new-post', 'li')"></button>
        </div>
        <div class='more-btn'>
          <a href="/archives" role="button">
            <span>文章归档</span>
          </a>
        </div>
      </nav>
    </div>
  </section>
</template>

<script lang='ts'>
import { addScrollEventNext, addScrollEventPrev, timeAgo } from '@/utils/commonUtil'
import { defineComponent } from 'vue'
import { ArticlePath } from '@/models/@types'

export default defineComponent({
  name: 'FeatureCard',
  computed: {
    ArticlePath() {
      return ArticlePath
    }
  },
  props:['title','featureList'],
  methods: { timeAgo, addScrollEventNext, addScrollEventPrev },
  setup(){
  }
})
</script>

